<template>
	<div class="login">
		<div class="bgImg">
			<img src="../../assets/imgs/zz.jpg" width="100%" height="100%" />
		</div>
		<div class="login-area">
			<van-field :clearable='true' placeholder="请输入用户名" v-model="username" :border="false">
				<img class="left-icon-slot" src="../../assets/imgs/userHead.png" slot='left-icon' />
			</van-field>
			<van-field :clearable='true' placeholder="请输入密码" v-model="pwd" type="password" :border="false">
				<img class="left-icon-slot" src="../../assets/imgs/pwd.png" slot='left-icon' />
			</van-field>
			<van-button type="default" color="#45b9b6" size="large" @click='login'>登录</van-button>
		</div>

	</div>
</template>

<script>
	import {Toast} from 'vant'
	export default{
		data(){
			return{
				username:'',
				pwd:''
			}
		},
		created() {
			console.log(this.url.login)
		},
		methods:{
			login(){
				if(!this.username||!this.pwd){
					return Toast.fail({message:'请输入完整信息',duration:900})
				}
				this.$axios.post(this.url.login,{id:this.username,password:this.pwd}).then((res)=>{
					if(res.data.status === 200){
						this.$router.push({name:'main'})
						this.$axios.post('http://121.41.32.143:8080/JQ-DCP/User/getCurrentUser.do').then(res2=>{
							if(res2.data.status === 200){
								let userName = res2.data.currentUser.username
								localStorage.cksLoginInfo = JSON.stringify({id:this.username,password:this.pwd,userName:userName})
							}
						})
						
					}
				}).catch(err=>{
					Toast({message:'登录失败',duration:900})
				})
				
			},
			
		}
	}
</script>

<style scoped="scoped">
	.left-icon-slot{
		vertical-align: middle;
	}
	.bgImg {
		text-align: center;
    height: 12rem;

	}
  .bgImg img{
    object-fit: container;
  }
	.login-area{
		padding: 1rem;
		padding-top: 2rem;
	}
	.van-cell{
		margin-bottom: 1rem;
		font-size: .87rem;
	}
	.van-button{
		border-radius: 10px;
		margin-top: 2rem;
		height: 2.2rem;
		font-size: .8rem;
		line-height: 2rem;
	}
</style>
